<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>轮回眼</title>
  <style>
	div {
		margin: 10px auto;
		border-radius: 50%;
		border: 3px solid #000;
	}
	@keyframes move {
		from {
			transform: scale(1);
		}
		to {
			transform: scale(0.5);
		}
	}
	@keyframes move2 {
		0% {
			transform: scale(1);
		}
		25% {
			transform: scale(0.6);
		}
		50% {
			transform: scale(1);
		}
		100% {
			transform: scale(0.6);
		}
	}
	div.eye-kuan {
		position: relative;
		width: 200px;
		height: 100px;
		overflow: hidden;
		background: #a195ad;
		border-radius: 0% 53% / 1% 100%;
	}
	div.eye {
		position: absolute;
		top: -80px;
		left: 6px;
		width: 200px;
		height: 200px;
		animation: move2 8s 0.9s linear infinite alternate;s
	}
	div.eye .eye-1 {
		width: 180px;
		height: 180px;
		animation: move2 8s 0.8s linear infinite alternate;
	}
	div.eye .eye-2 {
		width: 160px;
		height: 160px;
		animation: move2 7s 0.7s linear infinite alternate; 
	}
	div.eye .eye-3 {
		width: 140px;
		height: 140px;
		animation: move2 6s 0.6s linear infinite alternate;
	}
	div.eye .eye-4 {
		width: 120px;
		height: 120px;
		animation: move 5s 0.5s linear infinite alternate;
	}
	div.eye .eye-5 {
		width: 100px;
		height: 100px;
		animation: move 4s 0.4s linear infinite alternate;
	}
	div.eye .eye-6 {
		width: 80px;
		height: 80px;
		animation: move 3s 0.3s linear infinite alternate;
	}
	div.eye .eye-7 {
		width: 60px;
		height: 60px;
		background: #877a94;
		animation: move 2s 0.2s linear infinite alternate;
	}
	div.eye .eye-8 {
		width: 40px;
		height: 40px;
		background: #000;
		animation: move 1s 0.1s linear infinite alternate;
	}
	div.eye .eye-9 {
		width: 20px;
		height: 20px;
		background: #000;
		animation: move 1s linear infinite alternate;
	}
  </style>
 </head>
 <body>
	<div class='eye-kuan'>	
		<div class='eye'>
			<div class='eye-1'>
				<div class='eye-2'>
					<div class='eye-3'>
						<div class='eye-4'>
							<div class='eye-5'>
								<div class='eye-6'>
									<div class='eye-7'>
										<div class='eye-8'>
											<div class='eye-9'>
							
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
 </body>
</html>
